<!-- 
	- 엘리멘트 위치 
	- 엘리멘트 크기
	- 엘리멘트 가시성 / display 
	- 엘리멘트 불투명도  / degree
 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body{
		margin:0px;
		padding: 0px;	
	}
	div{
		margin:0px;	
		padding: 0px;
	}
	div.container{
		position:relative;
		top:0px;
		left:0px;
		width:600px;
		height:600px;
		background: white;
		border: 1px solid black;
	}
	
	div.child1{
		position:absolute;
		top:100px;
		left:100px;
		width:400px;
		height:400px;
		background: red;
	}
	div.child2{
		position:absolute;
		top:150px;
		left:150px;
		width:50px;
		height:50px;
		background: yellow;
	}
	.blank{
		width:150px;
		height:50px;
		background: green;
		display: none;
	}
	.pop{
		position:absolute;
		top:0px;
		left:0px;
		width:900px;
		height:700px;
		background: gray;
		display: none;
		text-align: right;
	}
</style>
<script src="../debug/debug.js"></script>
<script>
	var debug;
	
	//설정된 스타일값을 리턴한다. 
	function getStyle(elem,name){
		if(elem.style[name])
			return elem.style[name];
		else if(elem.currentStyle)   //익스플로러  타입
			return elem.currentStyle[name];
		else if(document.defaultView&&document.defaultView.getComputedStyle){   //w3c호환 브라우저
			name = name.replace(/([A-Z])/g,"-$1");   //가령  textAlign 대신 text-align형태의 문법을 사용한다.
			name = name.toLowerCase();
			
			var s = document.defaultView.getComputedStyle(elem,"");
			return s&&s.getPropertyValue(name);
		}else
			return null;
	}
	//브라우저 상에서 엘리먼트의  x좌표를 얻는다.
	function pageX(elem){
		var p=0;
		while(elem.offsetParent){
			p+=elem.offsetLeft;
			elem = elem.offsetParent;
		}		
		return p;
	}	
	//브라우저 상에서 엘리먼트의 y좌표를 얻는다.
	function pageY(elem){
		var p=0;
		while(elem.offsetParent){
			p+=elem.offsetTop;
			elem = elem.offsetParent;
		}
		return p;
	}
	
	//부모에  상대적인 엘리먼트의 X 위치를 찾는다.
	function parentX(elem){
		return elem.parentNode==elem.offsetParent?elem.offsetLeft:pageX(elem)-pageX(elem.parentNode);
	}
	//부모에 상대적인 엘리먼트의 Y 위치를  찾는다.
	function parentY(elem){
		return elem.parentNode == elem.offsetParent?elem.offsetTop:pageY(elem)-pageY(elem.parentNode);
	}
	
	//엘리멘트에 설정된 x값 읽어오기
	function posX(elem){
		return parseInt(getStyle(elem,'left'));
	}
	//엘리멘트에 설정된 y값읽어오기
	function posY(elem){
		return parseInt(getStyle(elem,'top'));
	}
	
	//엘리멘트 위치 재설정 하기
	function setPosition(elem,x,y){
		/* elem.style.left = x+"px";
		elem.style.top = y+"px"; */
		addX(elem,x);  //현재 위치를 기준으로 증감시키기
		addY(elem,y);
	}
	
	function addX(elem,pos){
		setX(elem,posX(elem)+pos);
	}
	
	function addY(elem,pos){
		setY(elem,posY(elem)+pos);
	}	

	function setX(elem,pos){
		elem.style.left=pos+"px";
	}
	
	function setY(elem,pos){
		elem.style.top=pos+"px";
	}
	
	
	//엘리먼트의 실제높이 구하기
	function getHeight(elem){
		return parseInt(getStyle(elem,"height"));   //10px처럼 뒤에 px가 붙기 때문에 리턴값을 parseInt한다.
	}
	
	function getWidth(elem){
		return parseInt(getStyle(elem,"width"));
	}	
	
	/*  
	엘리먼트  크기  구하기 write  by john resig
	// Find the full, possible, height of an element (not the actual,
	// current, height)
	function fullHeight( elem ) {
	    // If the element is being displayed, then offsetHeight
	    // should do the trick, barring that, getHeight() will work
	    if ( getStyle( elem, 'display' ) != 'none' )
	        return elem.offsetHeight || getHeight( elem );
	
	    // Otherwise, we have to deal with an element with a display
	    // of none, so we need to reset its CSS properties to get a more
	    // accurate reading
	    var old = resetCSS( elem, {
	        display: '',
	        visibility: 'hidden',
	        position: 'absolute'
	    });
	
	    // Figure out what the full height of the element is, using clientHeight
	    // and if that doesn't work, use getHeight
	    var h = elem.clientHeight || getHeight( elem );
	
	    // Finally, restore the CSS properties back to what they were
	    restoreCSS( elem, old );
	
	    // and return the full height of the element
	    return h;
	}
	
	// Find the full, possible, width of an element (not the actual,
	// current, width)
	function fullWidth( elem ) {
	    // If the element is being displayed, then offsetWidth
	    // should do the trick, barring that, getWidth() will work
	    if ( getStyle( elem, 'display' ) != 'none' )
	        return elem.offsetWidth || getWidth( elem );
	
	    // Otherwise, we have to deal with an element with a display
	    // of none, so we need to reset its CSS properties to get a more
	    // accurate reading
	    var old = resetCSS( elem, {
	        display: '',
	        visibility: 'hidden',
	        position: 'absolute'
	    });
	
	    // Figure out what the full width of the element is, using clientWidth
	    // and if that doesn't work, use getWidth
	    var w = elem.clientWidth || getWidth( elem );
	
	    // Finally, restore the CSS properties back to what they were
	    restoreCSS( elem, old );
	
	    // and return the full width of the element
	    return w;
	}
	
	// A function used for setting a set of CSS properties, which
	// can then be restored back again later
	function resetCSS( elem, prop ) {
	    var old = {};
	
	    // Go through each of the properties
	    for ( var i in prop ) {
	        // Remember the old property value
	        old[ i ] = elem.style[ i ];
	
	        // And set the new value
	        elem.style[ i ] = prop[i];
	    }
	
	    // Retun the set of changed values, to be used by restoreCSS
	    return old;
	}
	
	// A function for restoring the side effects of the resetCSS function
	function restoreCSS( elem, prop ) {
	    // Reset all the properties back to their original values
	    for ( var i in prop )
	        elem.style[ i ] = prop[ i ];
	}
	
	*/
	
	//element display controll
	function hide(elem){
		var curDisplay = getStyle(elem,"display");
		if(curDisplay!="none"){
			elem.$oldDisplay = curDisplay;			
		}
		elem.style.display = "none";
	}
	
	function show(elem){
		elem.style.display = elem.$oldDisplay||"block";
	}
	
	function hideShow(elem){
		var display = getStyle(elem,"display");
		display=="none"?show(elem):hide(elem);
	}
	
	//엘리멘트 불투명도 조절 leve 0(투명) ~ 100(불투명)	
	function setOpacity(elem,level){
		if(elem.filters)   // explorer
			elem.filters.alpha.opacity = level;
		else
			elem.style.opacity = level/100;  //w3c 호환 브라우저
	}
	
	function popup(elem){
		setOpacity(elem,50);
		hideShow(elem);
	}
	
	window.onload=function(e){
		debug = new DebugConsole();	
		
		debug.displayMsg("브라우저내:child1:x="+pageX(document.getElementById("child1"))+",child1:y="+pageY(document.getElementById("child1")));  //100
		debug.displayMsg("브라우저내:child2:x="+pageX(document.getElementById("child2"))+",child2:y="+pageY(document.getElementById("child2")));  //250
		
		debug.displayMsg("부모상대값:child2:x="+parentX(document.getElementById("child2"))+",child2:y="+parentY(document.getElementById("child2"))); //150
		
		debug.displayMsg("설정값:child2(posX):x="+posX(document.getElementById("child2"))+",child2(posY):y="+posY(document.getElementById("child2"))); //150
		debug.displayMsg("설정값:child1(posX):x="+posX(document.getElementById("child1"))+",child2(posY):y="+posY(document.getElementById("child1")));
		
		document.getElementById("setPosition").onclick=function(e){
			var elem = document.getElementById("child2");
			var x = parseInt(document.getElementById("posx").value);
			var y = parseInt(document.getElementById("posy").value);			
			setPosition(elem,x,y);
		};
		
		debug.displayMsg("크기:child2 height="+getHeight(document.getElementById("child2"))+",child2 width="+getWidth(document.getElementById("child2")));
		debug.displayMsg("크기:blank height="+getHeight(document.getElementById("blank"))+",blank width="+getWidth(document.getElementById("blank")));
		debug.displayMsg("offsetHeight="+document.getElementById("blank").offsetHeight+", offsetWidth:"+document.getElementById("blank").offsetWidth);
		
		document.getElementById("showHide").onclick = function(e){
			var elem = document.getElementById("blank");
			debug.displayMsg(elem.$oldDisplay);
			hideShow(elem);
		}
		
		document.getElementById("popup").onclick=function(e){
			var elem = document.getElementById("pop");
			popup(elem);
		}
		
		document.getElementById("close").onclick=function(e){
			var elem = document.getElementById("pop");
			hideShow(elem);
		}
		document.getElementById("btnOpacity").onclick=function(e){
			var elem = document.getElementById("pop");
			var val = document.getElementById("opacity").value;
			setOpacity(elem,val);
		}
	}
</script>
</head>
<body>
	<div id="container" class="container">container
		<div id="child1" class="child1">child1
			<div id="child2" class="child2">child2</div>
		</div>
	</div>
	
	<div id="btnContainer">
		<input type="text" id="posx">x값 0~350 <br>
		<input type="text" id="posy">y값  0~350<br>
		<button id="setPosition">child2 위치설정</button>
		<button id="showHide">blank  변경</button>
		<button id="popup">popup 띄우기</button>
	</div>
	<div id="blank" class="blank"></div>
	<div id="pop" class="pop">
		<button id="close">닫기</button><br>
		설정값:<input type="text" id="opacity"> <button id="btnOpacity">설정</button>
	</div>
</body>
</html>